<template>
  <div>
    <div style="display: flex;justify-content: space-between">
      <el-button type="primary" icon="el-icon-plus" @click="showAddSalary">添加工资账套</el-button>
      <el-button type="success" icon="el-icon-refresh" @click="initSalaries"></el-button>
    </div>
    <div style="margin-top: 10px">
      <el-table
          border
          :data="salaries"
          stripe>
        <el-table-column
            width="40"
            type="selection">
        </el-table-column>
        <el-table-column
            width="120"
            label="账套名称"
            prop="name">
        </el-table-column>
        <el-table-column
            width="80"
            label="基本工资"
            prop="basicSalary">
        </el-table-column>
        <el-table-column
            width="80"
            label="交通补助"
            prop="trafficSalary">
        </el-table-column>
        <el-table-column
            width="80"
            label="午餐补助"
            prop="lunchSalary">
        </el-table-column>
        <el-table-column
            width="70"
            label="奖金"
            prop="bonus">
        </el-table-column>
        <el-table-column
            width="100"
            label="启用时间"
            prop="createDate">
        </el-table-column>
        <el-table-column
            label="养老金"
            align="center">
          <el-table-column
              width="70"
              prop="pensionPer"
              label="比率">
          </el-table-column>
          <el-table-column
              width="70"
              prop="pensionBase"
              label="基数">
          </el-table-column>
        </el-table-column>
        <el-table-column
            label="医疗保险"
            align="center">
          <el-table-column
              width="70"
              prop="medicalPer"
              label="比率">
          </el-table-column>
          <el-table-column
              width="70"
              prop="medicalBase"
              label="基数">
          </el-table-column>
        </el-table-column>
        <el-table-column
            label="公积金"
            align="center">
          <el-table-column
              width="70"
              prop="accumulationFundPer"
              label="比率">
          </el-table-column>
          <el-table-column
              width="70"
              prop="accumulationFundBase"
              label="基数">
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="showEditSalaryView(scope.row)">编辑</el-button>
            <el-button @click="deleteSalary(scope.row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="50%">
      <div style="display: flex;justify-content: space-around;align-items: center">
        <el-steps direction="vertical" :active="activeItemIndex">
          <el-step :title="itemName" v-for="(itemName,index) in salaryItemName" :key="index"></el-step>
        </el-steps>

        <el-input
            v-model="salary[title]"
            :placeholder="'请输入'+salaryItemName[index]+'...'"
            v-show="activeItemIndex==index"
            style="width: 200px"
            v-for="(value,title,index) in salary"
            :key="index">
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="preStep">{{activeItemIndex==10?'取消':'上一步'}}</el-button>
        <el-button type="primary" @click="nextStep">{{activeItemIndex==10?'完成':'下一步'}}</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SalSob",
  data() {
    return {

      dialogTitle:'添加工资账套',
      activeItemIndex:0,
      salaryItemName:[
          '账套工资',
          '基本工资',
          '交通补助',
          '午餐补助',
          '奖金',
          '养老金比率',
          '养老金基数',
          '医疗保险比率',
          '医疗保险基数',
          '公积金比率',
          '公积金基数',
      ],
      salary:{
        name:'',
        basicSalary:null,
        trafficSalary:null,
        lunchSalary:null,
        bonus:null,
        pensionPer:null,
        pensionBase:null,
        medicalPer:null,
        medicalBase:null,
        accumulationFundPer:null,
        accumulationFundBase:null
      },
      dialogVisible: false,
      salaries: [],
    }
  },
  methods: {
    showEditSalaryView(data){
      this.dialogTitle='编辑工资账套'
      this.activeItemIndex=0
      this.salary.id=data.id
      this.salary.name=data.name
      this.salary.basicSalary=data.basicSalary
      this.salary.trafficSalary=data.trafficSalary
      this.salary.lunchSalary=data.lunchSalary
      this.salary.bonus=data.bonus
      this.salary.pensionPer=data.pensionPer
      this.salary.pensionBase=data.pensionBase
      this.salary.medicalPer=data.medicalPer
      this.salary.medicalBase=data.medicalBase
      this.salary.accumulationFundPer=data.accumulationFundPer
      this.salary.accumulationFundBase=data.accumulationFundBase
      this.dialogVisible=true

    },
    deleteSalary(data){
      this.$confirm('此操作将永久删除['+data.name+'], 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/salary/sob/'+data.id).then(resp=>{
          if (resp){
            this.initSalaries()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    preStep(){
      if (this.activeItemIndex==0){
        return
      }else if (this.activeItemIndex==10){
        this.dialogVisible=false
        return
      }
      this.activeItemIndex--;
    },
    nextStep(){
      if (this.activeItemIndex==10){
        if (this.salary.id){
          this.putRequest('/salary/sob/',this.salary).then(resp=>{
            if (resp){
              this.initSalaries()
              this.dialogVisible=false
            }
          })
        }else {
          this.postRequest('/salary/sob/',this.salary).then(resp=>{
            if (resp){
              this.initSalaries()
              this.dialogVisible=false
            }
          })
        }
        return
      }
      this.activeItemIndex++
    },
    showAddSalary(){
      this.dialogTitle='添加工资账套'
      this.salary={
        name:'',
        basicSalary:0,
        trafficSalary:0,
        lunchSalary:0,
        bonus:0,
        pensionPer:0,
        pensionBase:0,
        medicalPer:0,
        medicalBase:0,
        accumulationFundPer:0,
        accumulationFundBase:0
      }
      this.activeItemIndex=0
      this.dialogVisible=true
    },
    initSalaries() {
      this.gettRequest('/salary/sob/').then(resp => {
        if (resp) {
          this.salaries = resp
        }
      })
    },
  },
  mounted() {
    this.initSalaries()
  }
}
</script>

<style scoped>

</style>